﻿function getHtml(item) {
    //var result = "<tr class='remove'><td><input class='id' type='hidden' value='" + item['id'] + "'><input class='box' type='checkbox' " + ('undefined' == typeof (item['checked']) ? "" : item['checked'] ? "checked='checked'" : "") + "/></td><td class='oldUrl' title='" + item['old'] + "'><span class='copy-icon'></span><a>" + item['old'] + "</a></td><td class='newUrl' title='" + item['new'] + "'><span class='copy-icon'></span><a>" + item['new'] + "</a></td><td><button class='removeBtn'>删除</button></td></tr>";
    var result = "<tr class='remove'>" +
        "<td><input class='id' type='hidden' value='itemId'><input class='box' type='checkbox' itemChecked ></td>" +
        "<td class='copy-icon'></td>" +
        "<td class='oldUrl' title='itemOld'> itemOld </td>" +
        "<td class='copy-icon'></td>" +
        "<td class='newUrl' title='itemNew'> itemNew </td>" +
        "<td><button class='removeBtn'>删除</button></td>"
        "</tr>";

    result = result.replaceAll("itemId", item['id']);
    result = result.replaceAll('itemChecked',('undefined' == typeof (item['checked']) ? "" : item['checked'] ? "checked='checked'" : ""));
    result = result.replaceAll('itemOld',item['old']);
    result = result.replaceAll('itemNew',item['new']);
    return result;
}

function addItem(item) {
    var itemHtml = getHtml(item);
    $("#list tr:last").before(itemHtml);
}

function removeItem() {
    var id = $($(this).parent().parent().children("td").get(0)).children(".id").val();
    requestBackground('removeById', {"id": id}, function () {
        //重新加载
        loadItemFromLocalStage();
    });
}

function clickBox() {
    var oldUrl = $(this).parent().parent().children('.oldUrl').html();
    var newUrl = $(this).parent().parent().children('.newUrl').html();
    var checked = this.checked;
    var id = $(this).parent().children(".id").val()
    requestBackground('update', {"id": id, "old": oldUrl, "new": newUrl, "checked": checked}, function () {
        //重新加载
        loadItemFromLocalStage();
    });
}

function loadItemFromLocalStage() {
    //删除所有数据
    $(".remove").remove();
    //最后一行
    $("#list tr:last").after("<tr class='remove'><td></td><td></td><td><input id='old'/></td><td></td><td><input id='new'/></td><td><button id='add'>新增</button></td></tr>");
    document.getElementById("add").addEventListener("click", addNew);
    //从background中获取缓存的数据
    requestBackground("getItemList", null, function (items) {
        if (items != null && 'undefined' != typeof (items)) {
            for (var i = 0; i < items.length; i++) {
                addItem(items[i]);
            }
        }
    });
    //删除按钮
    setTimeout(function () {
        $(".removeBtn").bind("click", removeItem);
        $(".box").bind("click", clickBox);
        $(".copy-icon").bind("click", copyText);
    }, 400);

}

function addNew() {
    //添加
    var oldValue = document.getElementById("old").value;
    var newValue = document.getElementById("new").value;
    var id = (new Date()).toString();
    requestBackground('setItem', [{"id": id, "old": oldValue, "new": newValue, "checked": true}], function () {
        //更新页面
        loadItemFromLocalStage();
    });
}

$(document).ready(function () {
    //1.加载本地缓存列表
    loadItemFromLocalStage();
});

function copyText(event) {
    var text = $(event.target).next("td").text() // 获取td内容
    navigator.clipboard.writeText(text); // 复制到剪贴板
    alert('内容已复制：' + text); // 弹出提示
}